<template>
  <!-- 修改组件标签名 -->
  <master :title="name">
    <!-- 页面表格展示数据 - 修改为订单列表 -->
    <div class="bodyc0">
      <div class="bodyc1">
        <!-- 替换为订单相关按钮 -->
        <el-button type="primary" @click="getList">刷新订单</el-button>
        <el-button type="primary" @click="addOrder">新增订单</el-button>
        <el-button type="primary" @click="viewProcessOrders">查看工艺订单</el-button>
      </div>
      <div class="center">
        <el-table :data="orders" style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
          <el-table-column prop="title" label="订单标题" width="200"></el-table-column>
          <el-table-column prop="status" label="订单状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="total_amount" label="订单金额" width="100"></el-table-column>
          <el-table-column prop="description" label="订单描述" width="250"></el-table-column>
          <el-table-column prop="deadlineString" label="截止时间" width="160"></el-table-column>
          <el-table-column prop="createTimeString" label="创建时间" width="160"></el-table-column>
          <el-table-column prop="processCount" label="工艺步骤数" width="100"></el-table-column>
          <!-- 操作列改为订单相关操作 -->
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <!-- <el-button type="primary" size="small" @click="viewOrder(scope.row)">查看</el-button> -->
              <el-button type="success" size="small" @click="editOrder(scope.row)">编辑</el-button>
              <el-button type="info" size="small" @click="viewOrderProcessSteps(scope.row.id)">工艺步骤</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="page1">
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="params.pageNum"
          :page-sizes="[10, 50, 100, 200, 500]" :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 订单新增、编辑对话框 -->
    <el-dialog title="订单编辑" :visible.sync="dialogVisible" width="800px">
      <el-form ref="orderForm" :model="orderForm" label-width="80px">
        <!-- <el-form-item label="订单编号">
          <el-input v-model="orderForm.id" readonly></el-input>
        </el-form-item> -->
        <el-form-item label="订单标题" prop="title">
          <el-input v-model="orderForm.title"></el-input>
        </el-form-item>
        <el-form-item label="订单金额">
          <el-input v-model="orderForm.total_amount" type="number"></el-input>
        </el-form-item>
        <el-form-item label="订单描述">
          <el-input type="textarea" v-model="orderForm.description"></el-input>
        </el-form-item>
        <el-form-item label="截止时间">
          <el-date-picker type="datetime" v-model="orderForm.deadline" :disabled-date="disabledDate"
            :disabled-time="disabledTime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>

        <!-- 添加工艺步骤选择 -->
        <el-form-item label="工艺步骤">
          <div style="margin-bottom: 10px; font-weight: bold;">已选择工艺步骤数量: {{ processStepsWithAmount.length }}</div>
          <el-select v-model="selectedProcessSteps" multiple placeholder="请选择工艺步骤" style="width: 100%"
            @change="updateProcessStepsWithAmount">
            <el-option v-for="item in processSteps" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>

          <div v-if="selectedProcessSteps.length > 0" style="margin-top: 10px;">
            <el-table :data="processStepsWithAmount" style="width: 100%">
              <el-table-column prop="name" label="工艺名称" width="200"></el-table-column>
              <el-table-column prop="step_amount" label="工艺金额" width="150">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.step_amount" :min="0" style="width: 100%"></el-input-number>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="completed_at" label="完成时间" width="180">
                <template slot-scope="scope">
                  <el-date-picker type="datetime" v-model="scope.row.completed_at"
                    placeholder="选择日期时间"></el-date-picker>
                </template>
              </el-table-column> -->
              <el-table-column prop="completed_at" label="完成时间" width="180">
                <template slot-scope="scope">
                  <el-date-picker type="datetime" v-model="scope.row.completed_at" placeholder="选择日期时间"
                    :disabled-date="disabledDate" :disabled-time="disabledTime"></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                  <el-button type="danger" size="small" @click="removeProcessStep(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        
        <el-form-item label="图片信息">
          <el-upload action="/upload" :headers="header" :on-success="upOk" :on-remove="remove" :on-error="upFail"
            list-type="picture-card" :auto-upload="true" :file-list="fileList">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveOrder">确定</el-button>
      </div>
    </el-dialog>

    <!-- 工艺订单列表对话框 -->
    <el-dialog title="工艺订单列表" :visible.sync="processOrdersDialogVisible" width="1100px">
      <el-table :data="processOrders" style="width: 100%">
        <el-table-column prop="id" label="工艺订单ID" width="180"></el-table-column>
        <el-table-column prop="orderId" label="主订单ID" width="180"></el-table-column>
        <el-table-column prop="stepName" label="工艺名称" width="150"></el-table-column>
        <el-table-column prop="step_amount" label="工艺金额" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getProcessStatusTagType(scope.row.status)">{{ getProcessStatusText(scope.row.status)
              }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="claimed_by" label="抢单人ID" width="120"></el-table-column>
        <el-table-column prop="completed_at" label="完成时间" width="160"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="processOrdersDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 订单工艺步骤列表对话框 -->
    <el-dialog title="订单工艺步骤" :visible.sync="orderProcessStepsDialogVisible" width="600px">
      <el-table :data="currentOrderProcessSteps" style="width: 100%">
        <el-table-column prop="stepName" label="工艺名称" width="150"></el-table-column>
        <el-table-column prop="step_amount" label="工艺金额" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getProcessStatusTagType(scope.row.status)">{{ getProcessStatusText(scope.row.status)
              }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderProcessStepsDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </master>
</template>

<script type="text/javascript">
  (function (G) {
    var _this;
    G.vue({
      "usingComponents": {//引入组件
        "master": "/components/Master/Master"
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        orders: [],
        name: "订单管理",
        dialogVisible: false,
        orderForm: {},
        isEdit: false,
        processSteps: [], // 所有可用的工艺步骤
        selectedProcessSteps: [], // 选择的工艺步骤（用于选择器）
        processStepsWithAmount: [], // 带金额的工艺步骤（用于表格展示）
        // 工艺订单对话框
        processOrdersDialogVisible: false,
        processOrders: [],
        // 订单工艺步骤对话框
        orderProcessStepsDialogVisible: false,
        currentOrderProcessSteps: [],
        canSave: true,
        fileList: true,
        currentTime: null,
        total: 0,
        params: {
          pageSize: 10,
          pageNum: 1,
        },
        currentOrderId: ''
      },
      // ******************method**********************
      methods: {
        disabledTime(date) {
          const currentDate = new Date();
          // 检查是否是今天
          if (date.getFullYear() === currentDate.getFullYear() &&
            date.getMonth() === currentDate.getMonth() &&
            date.getDate() === currentDate.getDate()) {
            return {
              // 禁用当前小时之前的所有小时
              disabledHours: () => {
                const hours = [];
                for (let i = 0; i < currentDate.getHours(); i++) {
                  hours.push(i);
                }
                return hours;
              },
              // 禁用当前分钟之前的所有分钟（如果选择了当前小时）
              disabledMinutes: (selectedHour) => {
                if (selectedHour < currentDate.getHours()) return [];
                const minutes = [];
                for (let i = 0; i < currentDate.getMinutes(); i++) {
                  minutes.push(i);
                }
                return minutes;
              },
              // 禁用当前秒数之前的所有秒数（如果选择了当前小时和分钟）
              disabledSeconds: (selectedHour, selectedMinute) => {
                if (selectedHour < currentDate.getHours() ||
                  (selectedHour === currentDate.getHours() && selectedMinute < currentDate.getMinutes())) {
                  return [];
                }
                const seconds = [];
                for (let i = 0; i < currentDate.getSeconds(); i++) {
                  seconds.push(i);
                }
                return seconds;
              }
            };
          }
          // 非今天则不限制时间
          return { disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [] };
        },

        disabledDate(date) {
          return date < new Date().setHours(0, 0, 0, 0);
        },
        upOk(res) {// 上传图片成功
          this.fileList.push('/file/' + res.id);
          console.log('--fileList', this.fileList);
        },
        upFail(res) {// 上传图片失败
          this.$message({
            type: 'info',
            message: '上传失败：',
          });
        },
        remove(res) {// 移除图片
          console.log('--移除图片', res.response.id);
          let list = []
          this.fileList.forEach(i => {
            console.log(res.response.id, i);
            if ('/file/' + res.response.id != i) {
              list.push(i)
            }
          })
          this.fileList = list
          console.log('--this.fileList', this.fileList);
        },
        // 获取订单列表
        async getList() {
          this.header = {
            'token': G.Storage.get('userInfo').token
          };
          try {
            this.loading = true;
            const response = await G.get("/api/model/t_orders", this.params);
            console.log("获取订单列表响应:", response);
            if (!response.errorMsg) {
              // 为每个订单获取工艺步骤数量并格式化截止时间
              for (let i = 0; i < response.rows.length; i++) {
                const order = response.rows[i];
                // 格式化截止时间
                if (order.deadline) {
                  order.deadlineString = new Date(order.deadline).toLocaleString('zh-CN').replace(/\//g, '-');
                }
              }

              // 先一次性获取所有订单的工艺步骤数据
              const allProcessStepsResponse = await G.get("/api/model/t_order_process_steps");

              if (!allProcessStepsResponse.errorMsg) {
                // 为每个订单计算工艺步骤数量
                response.rows.forEach(order => {
                  // 筛选出当前订单的工艺步骤
                  const orderProcessSteps = allProcessStepsResponse.filter(step => step.orderId === order.id);
                  order.processCount = orderProcessSteps.length;
                });
              } else {
                // 如果获取所有工艺步骤失败，则为每个订单单独获取
                for (let i = 0; i < response.rows.length; i++) {
                  const order = response.rows[i];
                  const count = await this.getOrderProcessCount(order.id);
                  order.processCount = count;
                }
              }

              console.log("处理后的订单列表:", response.rows);
              this.orders = response.rows;
              this.total = parseInt(response.total);
              this.loading = false;
            } else {
              this.loading = false;
              this.$message({ type: "error", message: response.errorMsg || "获取订单列表失败" });
            }
          } catch (error) {
            this.loading = false;
            console.error("获取订单列表失败:", error);
            this.$message({ type: "error", message: "获取订单列表失败" });
          }
        },

        // 获取订单的工艺步骤数量
        async getOrderProcessCount(orderId) {
          try {
            const response = await G.get('/api/model/t_order_process_steps',
              {orderId: orderId});
            // 加强数据验证，确保能够正确获取工艺步骤数量
            console.log(`订单ID: ${orderId} 的工艺步骤响应:`, response);
            if (!response.errorMsg) {
              return response.rows.length;
            } else if (response.errorMsg) {
              console.error(`获取订单ID: ${orderId} 的工艺步骤数量失败:`, response.errorMsg);
              return 0;
            } else {
              console.error(`获取订单ID: ${orderId} 的工艺步骤数量失败: 响应格式不正确`);
              return 0;
            }
          } catch (error) {
            console.error(`获取订单ID: ${orderId} 的工艺步骤数量异常:`, error);
            return 0;
          }
        },

        // 获取所有工艺步骤
        async getProcessSteps() {
          try {
            const response = await G.get("/api/model/t_process_steps");
            if (!response.errorMsg) {
              this.processSteps = response.rows;
            } else {
              this.$message({ type: "error", message: response.errorMsg || "获取工艺步骤失败" });
            }
          } catch (error) {
            console.error("获取工艺步骤失败:", error);
            this.$message({ type: "error", message: "获取工艺步骤失败" });
          }
        },

        // 新增订单
        async addOrder() {
          this.isEdit = false;
          this.orderForm = {};
          this.selectedProcessSteps = [];
          this.processStepsWithAmount = [];
          // 加载工艺步骤
          await this.getProcessSteps();
          this.dialogVisible = true;
        },

        // 编辑订单
        async editOrder(order) {
          this.isEdit = true;
          // 深拷贝订单数据
          this.orderForm = JSON.parse(JSON.stringify(order));
          this.selectedProcessSteps = [];
          this.processStepsWithAmount = [];
          // 加载工艺步骤
          await this.getProcessSteps();
          // 加载订单关联的工艺步骤
          await this.loadOrderProcessSteps(order.id);
          this.dialogVisible = true;
        },

        // 加载订单关联的工艺步骤
        async loadOrderProcessSteps(orderId) {
          try {
            const response = await G.get('/api/model/t_order_process_steps', {orderId: orderId});
            if (!response.errorMsg) {
              // 先将关联的工艺步骤ID存入selectedProcessSteps
              this.selectedProcessSteps = response.rows.map(item => item.stepId);
              // 再更新带金额的工艺步骤数据
              this.processStepsWithAmount = response.rows.map(item => ({
                ...this.processSteps.find(step => step.id === item.stepId),
                ...item
              }));
            }
          } catch (error) {
            console.error("加载订单工艺步骤失败:", error);
          }
        },

        // 查看订单详情
        viewOrder(order) {
          this.$alert(`订单详情\n\n订单编号: ${order.id}\n订单标题: ${order.title}\n订单状态: ${this.getStatusText(order.status)}\n订单金额: ${order.total_amount}\n订单描述: ${order.description}\n截止时间: ${order.deadlineString || order.deadline}\n创建时间: ${order.createTimeString}`, '订单详情', {
            confirmButtonText: '确定'
          });
        },

        // 删除订单
        deleteOrder(order) {
          this.$confirm(`确定要删除订单 ${order.id} 吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            try {
              const response = await G.delete("/api/model/t_orders",
                { id: order.id }
              );

              if (!response.errorMsg) {
                this.$message({ type: "success", message: "订单删除成功" });
                this.getList();
              } else {
                this.$message({ type: "error", message: response.errorMsg });
              }
            } catch (error) {
              console.error("订单删除失败:", error);
              this.$message({ type: "error", message: "订单删除失败" });
            }
          }).catch(() => {
            this.$message({ type: "info", message: "已取消删除" });
          });
        },

        // 保存订单
        async saveOrder() {
          console.log('this.canSave',this.canSave);
          
          if (!this.canSave) return;

          this.canSave = false
          try {
            // 表单验证
            if (!this.orderForm.title) {
              this.$message({ type: "error", message: "订单标题不能为空" });
              return;
            }

            if (this.orderForm.total_amount === undefined || this.orderForm.total_amount === null || this.orderForm.total_amount <= 0) {
              this.$message({ type: "error", message: "订单金额必须大于0" });
              return;
            }

            if (!this.orderForm.description) {
              this.$message({ type: "error", message: "订单描述不能为空" });
              return;
            }

            if (!this.orderForm.deadline) {
              this.$message({ type: "error", message: "截止时间不能为空" });
              return;
            }

            if (this.processStepsWithAmount.length === 0) {
              this.$message({ type: "error", message: "请至少选择一个工艺步骤" });
              return;
            }

            // 新增：截止时间必须为未来时间
            const currentTime = new Date();
            if (new Date(this.orderForm.deadline) <= currentTime) {
              this.$message({ type: "error", message: "截止时间必须选择未来时间" });
              return;
            }
            // 验证每个工艺步骤的金额
            for (const step of this.processStepsWithAmount) {
              if (step.step_amount === undefined || step.step_amount === null || step.step_amount <= 0) {
                this.$message({ type: "error", message: `工艺步骤"${step.name}"的金额必须大于0` });
                return;
              }
              console.log('step.completed_at', step.completed_at);

              // 新增：工艺步骤完成时间必须为未来时间（如果已设置）
              if (step.completed_at && new Date(step.completed_at) <= currentTime) {
                this.$message({ type: "error", message: `工艺步骤"${step.name}"的完成时间必须选择未来时间` });
                return;
              }
              if (!step.completed_at) {
                this.$message({ type: "error", message: '工艺步骤完成时间不能为空' });
                return;
              }
            }

            console.log('this.orderForm', this.orderForm);

            // 添加工艺步骤数量到订单表单中
            this.orderForm.processCount = this.selectedProcessSteps.length;

            if (this.isEdit) {
              const response = await G.put('/api/model/t_orders',
                this.orderForm);

              if (!response.errorMsg) {
                // 先删除原有的工艺步骤关联
                await this.deleteOrderProcessSteps(this.orderForm.id);
                // 再创建新的工艺步骤关联
                await this.createOrderProcessSteps(this.orderForm.id);

                this.$message({ type: "success", message: "订单更新成功" });
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message({ type: "error", message: response.errorMsg });
              }
            } else {
              const response = await G.post('/api/model/t_orders',
                this.orderForm);

              if (!response.errorMsg) {
                // 创建订单成功后，创建工艺步骤关联
                await this.createOrderProcessSteps(response.id);

                this.$message({ type: "success", message: "订单新增成功" });
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message({ type: "error", message: response.errorMsg });
              }
            }
          } catch (error) {
            console.error(this.isEdit ? "订单更新失败:" : "订单新增失败:", error);
            this.$message({ type: "error", message: this.isEdit ? "订单更新失败" : "订单新增失败" });
          } finally {
            // 使用setTimeout确保UI有足够时间响应状态变化
            setTimeout(() => {
              this.canSave = true;
            }, 500);
          }
        },

        // 删除订单的工艺步骤关联
        async deleteOrderProcessSteps(orderId) {
          try {
            const response = await G.get(`/api/model/t_order_process_steps?filter=orderId,eq,${orderId}`,
              {},
              {
                headers: {
                  "Content-Type": "application/json",
                  token: JSON.parse(sessionStorage.getItem("user")).passWord,
                },
              }
            );

            if (!response.errorMsg) {
              for (const item of response.rows) {
                await G.delete('/api/model/t_order_process_steps',
                  {id: item.id});
              }
            }
          } catch (error) {
            console.error("删除订单工艺步骤失败:", error);
          }
        },

        // 创建订单的工艺步骤关联
        async createOrderProcessSteps(orderId) {
          try {
            for (const step of this.processStepsWithAmount) {
              const orderProcessStep = {
                orderId: orderId,
                stepId: step.id,
                step_amount: step.step_amount || 0,
                claimed_by: '',
                completed_at: step.completed_at,
                createTime: Date.now(),
                createTimeString: new Date().toLocaleString('zh-CN')
              };

              await G.post('/api/model/t_order_process_steps',
                orderProcessStep);
            }
          } catch (error) {
            console.error("创建订单工艺步骤失败:", error);
            throw error;
          }
        },

        // 查看工艺订单列表
        async viewProcessOrders() {
          try {
            // 获取所有工艺订单
            const orderProcessStepsResponse = await G.get("/api/model/t_order_process_steps");

            if (!orderProcessStepsResponse.errorMsg) {
              // 获取所有工艺步骤信息
              const processStepsResponse = await G.get("/api/model/t_process_steps",
                {},
                {
                  headers: {
                    "Content-Type": "application/json",
                    token: JSON.parse(sessionStorage.getItem("user")).passWord,
                  },
                }
              );

              if (!processStepsResponse.errorMsg && processStepsResponse) {
                // 合并工艺步骤名称
                this.processOrders = orderProcessStepsResponse.rows.map(item => {
                  const processStep = processStepsResponse.find(step => step.id === item.stepId);
                  return {
                    ...item,
                    stepName: processStep ? processStep.name : '未知工艺'
                  };
                });

                this.processOrdersDialogVisible = true;
              }
            }
          } catch (error) {
            console.error("获取工艺订单列表失败:", error);
            this.$message({ type: "error", message: "获取工艺订单列表失败" });
          }
        },

        // 查看订单的工艺步骤
        async viewOrderProcessSteps(orderId) {
          this.currentOrderId = orderId;
          try {
            // 获取订单的工艺步骤
            const response = await G.get('/api/model/t_order_process_steps',
              { orderId: orderId });

            if (!response.errorMsg) {
              // 获取所有工艺步骤信息
              const processStepsResponse = await G.get("/api/model/t_process_steps",
                {},
                {
                  headers: {
                    "Content-Type": "application/json",
                    token: JSON.parse(sessionStorage.getItem("user")).passWord,
                  },
                }
              );

              if (!processStepsResponse.errorMsg) {
                // 合并工艺步骤名称
                this.currentOrderProcessSteps = response.rows.map(item => {
                  const processStep = processStepsResponse.rows.find(step => step.id === item.stepId);
                  return {
                    ...item,
                    stepName: processStep ? processStep.name : '未知工艺'
                  };
                });

                this.orderProcessStepsDialogVisible = true;
              }
            }
          } catch (error) {
            console.error("获取订单工艺步骤失败:", error);
            this.$message({ type: "error", message: "获取订单工艺步骤失败" });
          }
        },

        // 获取订单状态文本
        getStatusText(status) {
          const statusMap = {
            0: "待处理",
            1: "处理中",
            2: "已完成",
            3: "已取消"
          };
          return statusMap[status] || "未知";
        },

        // 获取订单状态标签类型
        getStatusTagType(status) {
          const typeMap = {
            0: "info",
            1: "warning",
            2: "success",
            3: "danger"
          };
          return typeMap[status] || "default";
        },

        // 获取工艺状态文本
        getProcessStatusText(status) {
          const statusMap = {
            '0': "待抢单",
            '1': "进行中",
            '3': "已完成",
            '2': "已取消"
          };
          return statusMap[status] || "未知";
        },

        // 获取工艺状态标签类型
        getProcessStatusTagType(status) {
          const typeMap = {
            '0': "info",
            '1': "warning",
            '3': "success",
            '2': "danger"
          };
          return typeMap[status] || "default";
        },

        // 更新工艺步骤金额和截止时间
        updateProcessStepsWithAmount() {
          // 清空现有的工艺步骤数据
          this.processStepsWithAmount = [];

          // 遍历选中的工艺步骤，为每个步骤设置金额和截止时间
          if (this.selectedProcessSteps.length > 0) {
            for (let i = 0; i < this.selectedProcessSteps.length; i++) {
              const stepId = this.selectedProcessSteps[i];
              const stepInfo = this.processSteps.find(step => step.id === stepId);

              if (stepInfo) {
                this.processStepsWithAmount.push({
                  ...stepInfo,
                  step_amount: 0, // 设置默认金额为0
                  completed_at: '' // 设置默认截止时间为空
                });
              }
            }
          }
        },

        // 移除工艺步骤
        removeProcessStep(step) {
          const index = this.processStepsWithAmount.findIndex(item => item.id === step.id);
          if (index > -1) {
            this.processStepsWithAmount.splice(index, 1);
          }
        },
        sizeChange(pageSize) {
          this.params.pageSize = pageSize;
          this.params.pageNum = 1;
          this.getList();
        },
        currentChange(pageNum) {
          this.params.pageNum = pageNum;
          this.getList();
        },
      },

      // 初始化调用
      mounted() {
        this.currentTime = new Date().toLocaleString();
        console.log('this.currentTime', this.currentTime);

        this.name = JSON.parse(sessionStorage.getItem("user")).name;
        // 初始化加载订单列表
        this.getList();
      }
    });
  })(Y)
</script>

<style scoped>
  .bodyc0 {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #fff;
    flex: 1;
  }

  .bodyc1 {
    margin-bottom: 20px;
  }

  .center {
    flex: 1;
  }

  /* 保留其他相关样式 */
</style>